<template>
  <div class="page-magic">
    <div class="box">
      <div style="opacity: 0">1</div>
      <div style="opacity: 0">1</div>
      <div style="opacity: 0">1</div>
      <div style="opacity: 0">1</div>
      <div style="opacity: 0">1</div>
      <div style="opacity: 0">1</div>
      <div class="box a1">
        <div />
        <div />
        <div />
        <div />
        <div />
        <div />
      </div>
      <div class="box a2">
        <div />
        <div />
        <div />
        <div />
        <div />
        <div />
      </div>
      <div class="box a3">
        <div />
        <div />
        <div />
        <div />
        <div />
        <div />
      </div>
      <div class="box a4">
        <div />
        <div />
        <div />
        <div />
        <div />
        <div />
      </div>
      <div class="box a5">
        <div />
        <div />
        <div />
        <div />
        <div />
        <div />
      </div>
      <div class="box a6">
        <div />
        <div />
        <div />
        <div />
        <div />
        <div />
      </div>
      <div class="box a7">
        <div />
        <div />
        <div />
        <div />
        <div />
        <div />
      </div>
      <div class="box a8">
        <div />
        <div />
        <div />
        <div />
        <div />
        <div />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
</script>

<style lang="less" scoped>
.page-magic {
  .box {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 150px auto;

    /* perspective: 800px; */
    transition: all 200s;
    transform-style: preserve-3d;
    transform: rotateX(15deg) rotateY(-15deg);
    /* animation: move 2s 4s linear alternate; */
  }

  /* @keyframes move{
  0%{
      transform: rotateX(15deg) rotateY(-15deg)
  }
  50%{
      margin: 100PX 100PX 100PX 100PX;
  }
  100%{
      transform: rotateX(15deg) rotateY(-15deg)
  }
} */
  .box:hover {
    transform: rotateX(10000deg) rotateY(-1000deg) rotateZ(10000deg) scale3d(0, 0, 0);
  }

  /* .box img{
  display: block;
  width: 95%;
  height: 95%;
  margin: 0 auto;
  margin-top: 2.5px;
} */

  .box div {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 20px;
  }

  .box div:nth-child(1) {
    border: 3px solid black;
    background: rgba(225, 0, 0, 0.9);
    transform: rotateX(90deg) translateZ(50px);
  }

  .box div:nth-child(2) {
    border: 3px solid black;
    background: rgba(225, 210, 0, 0.9);
    transform: translateZ(-50px);
  }

  .box div:nth-child(3) {
    border: 3px solid black;
    background: rgba(56, 225, 0, 0.9);
    transform: translateZ(50px);
  }

  .box div:nth-child(4) {
    border: 3px solid black;
    background: rgba(255, 192, 203, 0.89);
    transform: rotateX(-90deg) translateZ(50px);
  }

  .box div:nth-child(5) {
    border: 3px solid black;
    background: rgba(41, 0, 225, 0.9);
    transform: rotateY(90deg) translateZ(50px);
  }

  .box div:nth-child(6) {
    border: 3px solid black;
    background: rgba(225, 0, 180, 0.9);
    transform: rotateY(-90deg) translateZ(50px);
  }

  .a1 {
    transform: translateX(0px) translateY(-110px);
    animation: a11 1s 1s linear forwards, a12 1s 2s linear forwards, a13 1s 7s linear forwards, a14 1s 8s linear forwards, a15 2s 4s linear forwards;
  }

  .a2 {
    transform: translateX(110px) translateY(-100px);
    animation: a21 1s linear forwards, a22 1s 1s linear forwards, a23 1s 8s linear forwards, a24 1s 9s linear forwards, a25 2s 4s linear forwards;
  }

  .a3 {
    transform: translateX(110px) translateY(10px);
    animation: a31 1s linear forwards, a32 1s 1s linear forwards, a33 1s 2s linear forwards, a34 1s 3s linear forwards, a35 1s 6s linear forwards,
      a36 1s 7s linear forwards, a37 1s 8s linear forwards, a38 1s 9s linear forwards, a39 2s 4s linear forwards;
  }

  .a4 {
    transform: translateX(0px) translateY(10px);
    animation: a41 1s 2s linear forwards, a42 1s 3s linear forwards, a43 1s 6s linear forwards, a44 1s 7s linear forwards, a45 2s 4s linear forwards;
  }

  .a5 {
    transform: translateX(0px) translateY(10px) translateZ(110px);
    animation: a51 1s 2s linear forwards, a52 1s 7s linear forwards, a53 2s 4s linear forwards;
  }

  .a6 {
    transform: translateX(110px) translateY(10px) translateZ(110px);
    animation: a61 1s linear forwards, a62 1s 3s linear forwards, a63 1s 6s linear forwards, a64 1s 9s linear forwards, a65 2s 4s linear forwards;
  }

  .a7 {
    transform: translateX(110px) translateY(-100px) translateZ(110px);
    animation: a71 1s linear forwards, a72 1s 3s linear forwards, a73 1s 6s linear forwards, a74 1s 9s linear forwards, a75 2s 4s linear forwards;
  }

  .a8 {
    transform: translateX(0px) translateY(-100px) translateZ(110px);
    animation: a81 1s 1s linear forwards, a82 1s 8s linear forwards, a83 2s 4s linear alternate;
  }

  .box .a1 div {
    overflow: hidden;
  }

  .box .a2 div {
    overflow: hidden;
  }

  .box .a3 div {
    overflow: hidden;
  }

  .box .a4 div {
    overflow: hidden;
  }

  .box .a5 div {
    overflow: hidden;
  }

  .box .a6 div {
    overflow: hidden;
  }

  .box .a7 div {
    overflow: hidden;
  }

  .box .a8 div {
    overflow: hidden;
  }

  @keyframes a41 {
    100% {
      transform: translateX(0px) translateZ(110px) translateY(10px) rotateX(90deg);
    }
  }

  @keyframes a42 {
    100% {
      transform: translateX(0px) translateZ(0px) translateY(10px) rotateX(90deg) rotateZ(90deg);
    }
  }

  @keyframes a43 {
    100% {
      transform: translateX(0px) translateZ(110px) translateY(10px) rotateX(90deg) rotateZ(0deg);
    }
  }

  @keyframes a44 {
    100% {
      transform: translateX(0px) translateZ(0px) translateY(10px) rotateX(0deg);
    }
  }

  @keyframes a51 {
    100% {
      transform: translateX(0px) translateZ(110px) translateY(-100px) rotateX(90deg);
    }
  }

  @keyframes a52 {
    100% {
      transform: translateX(0px) translateZ(110px) translateY(10px) rotateX(0deg);
    }
  }

  @keyframes a71 {
    100% {
      transform: translateX(110px) translateZ(110px) translateY(10px) rotateX(-90deg);
    }
  }

  @keyframes a72 {
    100% {
      transform: translateX(0px) translateZ(110px) translateY(10px) rotateX(-90deg) rotateZ(-90deg);
    }
  }

  @keyframes a73 {
    100% {
      transform: translateX(110px) translateZ(110px) translateY(10px) rotateX(-90deg);
    }
  }

  @keyframes a74 {
    100% {
      transform: translateX(110px) translateZ(110px) translateY(-100px) rotateX(0deg);
    }
  }

  @keyframes a61 {
    100% {
      transform: translateX(110px) translateZ(0px) translateY(10px) rotateX(-90deg);
    }
  }

  @keyframes a62 {
    100% {
      transform: translateX(110px) translateZ(110px) translateY(10px) rotateX(-90deg) rotateZ(-90deg);
    }
  }

  @keyframes a63 {
    100% {
      transform: translateX(110px) translateZ(0px) translateY(10px) rotateX(-90deg);
    }
  }

  @keyframes a64 {
    100% {
      transform: translateX(110px) translateZ(110px) translateY(10px) rotateX(0deg);
    }
  }

  @keyframes a21 {
    100% {
      transform: translateX(110px) translateZ(110px) translateY(-100px) rotateX(-90deg);
    }
  }

  @keyframes a22 {
    100% {
      transform: translateX(110px) translateZ(0px) translateY(-100px) rotateX(-90deg) rotateY(0deg) rotateZ(90deg);
    }
  }

  @keyframes a23 {
    100% {
      transform: translateX(110px) translateZ(110px) translateY(-100px) rotateX(-90deg);
    }
  }

  @keyframes a24 {
    100% {
      transform: translateX(110px) translateZ(0px) translateY(-100px) rotateX(0deg);
    }
  }

  @keyframes a31 {
    100% {
      transform: translateX(110px) translateZ(0px) translateY(-100px) rotateX(-90deg);
    }
  }

  @keyframes a32 {
    100% {
      transform: translateX(0px) translateZ(0px) translateY(-100px) rotateX(-90deg) rotateY(0deg) rotateZ(90deg);
    }
  }

  @keyframes a33 {
    100% {
      transform: translateX(0px) translateZ(0px) translateY(10px) rotateY(90deg) rotateX(-90deg) rotateY(-90deg);
    }
  }

  @keyframes a34 {
    100% {
      transform: translateX(110px) translateZ(0px) translateY(10px) rotateY(90deg) rotateX(-90deg) rotateY(-90deg) rotateX(-90deg);
    }
  }

  @keyframes a35 {
    100% {
      transform: translateX(0px) translateZ(0px) translateY(10px) rotateY(90deg) rotateX(-90deg) rotateY(-90deg);
    }
  }

  @keyframes a36 {
    100% {
      transform: translateX(0px) translateZ(0px) translateY(-100px) rotateY(90deg) rotateX(-90deg);
    }
  }

  @keyframes a37 {
    100% {
      transform: translateX(110px) translateZ(0px) translateY(-100px) rotateX(-90deg);
    }
  }

  @keyframes a38 {
    100% {
      transform: translateX(110px) translateZ(0px) translateY(10px) rotateX(0deg);
    }
  }

  @keyframes a81 {
    100% {
      transform: translateX(110px) translateZ(110px) translateY(-100px) rotateY(90deg);
    }
  }

  @keyframes a82 {
    100% {
      transform: translateX(0px) translateZ(110px) translateY(-100px) rotateY(0deg);
    }
  }

  @keyframes a11 {
    100% {
      transform: translateX(0px) translateZ(110px) translateY(-100px) rotateY(90deg);
    }
  }

  @keyframes a12 {
    100% {
      transform: translateX(0px) translateZ(0px) translateY(-100px) rotateY(90deg) rotateZ(90deg);
    }
  }

  @keyframes a13 {
    100% {
      transform: translateX(0px) translateZ(110px) translateY(-100px) rotateY(90deg);
    }
  }

  @keyframes a14 {
    100% {
      transform: translateX(0px) translateZ(0px) translateY(-100px) rotateY(0deg);
    }
  }

  @keyframes a83 {
    50% {
      transform: translate3d(200px, -200px, 200px);
    }
  }

  @keyframes a53 {
    50% {
      transform: translate3d(-200px, -200px, 200px);
    }
  }

  @keyframes a75 {
    50% {
      transform: translate3d(-200px, 200px, 200px);
    }
  }

  @keyframes a65 {
    50% {
      transform: translate3d(200px, 200px, 200px);
    }
  }

  @keyframes a15 {
    50% {
      transform: translate3d(-200px, -200px, -200px);
    }
  }

  @keyframes a25 {
    50% {
      transform: translate3d(200px, -200px, -200px);
    }
  }

  @keyframes a39 {
    50% {
      transform: translate3d(200px, 200px, -200px);
    }
  }

  @keyframes a45 {
    50% {
      transform: translate3d(-200px, 200px, -200px);
    }
  }
}
</style>
